<style lang="less">
.device-photo-container {
  width: 700px;
  height: 130px;
  border: 2px solid #5b5b5b;
  background: #ffffff;
  .part1 {
    width: 200px;
    height: 130px;
    float: left;
    .device-name {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      padding: 10px;
    }
    .ars {
      margin-left: 20px;
      margin-top: 15px;
      width: 50px;
      height: 30px;
      background: url(./../../../static/dot.png) no-repeat 15px 20px;
      text-align: center;
    }
    .interface {
      float: left;
      width: 50px;
      height: 50px;
      background: url(./../../../static/interface.png) no-repeat 5px 0;
      .interface-text {
        position: absolute;
        bottom: 0;
        width: 50px;
        text-align: center;
      }
    }
  }
  .part2 {
    width: 150px;
    height: 130px;
    padding: 10px;
    float: left;

    .channel-name {
      float: left;
    }
    .channel-dot {
      float: left;
      width: 20px;
      height: 20px;
    }
  }
  .part3 {
    width: 400px;
    height: 130px;
    float: left;
  }
}
</style>
<template>
  <div>
    <div class="device-photo-container">
      <div class="part1">
        <div class="device-name">IFMS-1000</div>
        <div style="margin-top:5px;">
          <Row>
            <Col :span="10">
              <div class="ars">ARS</div>
            </Col>
            <Col :span="14">
              <div class="interface">
                <div class="interface-text">ETH</div>
              </div>
              <div class="interface">
                <div class="interface-text">RS232</div>
              </div>
            </Col>
          </Row>
        </div>
      </div>
      <div class="part2">
        <div>
          <div v-for="(item,index) in channelList" class="channel-name" :key="index">CH{{item}}</div>
          <div v-for="(item,index) in channelList" class="channel-dot" :key="index"></div>
        </div>
      </div>
      <div class="part3"></div>
    </div>
  </div>
</template>

<script>
import { getFrameInfo, getFrameDevices } from "@/api/device";

import util from "@/libs/util.js";

export default {
  name: "frame",
  components: {},
  props: {
    deviceId: {
      type: Number,
      default: function() {
        return 0;
      }
    }
  },

  data() {
    return {
      channelList: [1, 2, 3, 4, 5, 6, 7, 8],
      frameForm: {
        frameId: "",
        frameName: "",
        layer: "",
        detail: "",
        height: "",
        row: "",
        lat: "",
        lng: "",
        col: "",
        supplier: "",
        remark: ""
      },
      room: []
    };
  },
  methods: {
    getAllFrameInfo() {
      getFrameDevices({ equipmentroomId: this.deviceId }).then(
        res => {
          if (res.code == 0) {
            if (res.data.length > 0) {
              this.room = res.data.map(v => {
                let children = new Array(v.layer);
                for (let i = 0; i < v.layer; i++) {
                  children[i] = { hasDevice: false };
                }

                v.children.forEach(child => {
                  children[child.layerRow - 1].hasDevice = true;
                });
                return { frameName: v.frameName, children: children };
              });
            }
          }
        },
        error => {
          console.log("submit error", JSON.stringify(error));
        }
      );
    }
  },
  mounted() {}
};
</script>
